@using AntDesign.Pro.Pages.Monitor.Components;
@namespace AntDesign.Pro.Pages.Monitor
@page "/dashboard/monitor"

<GridContent>
    <Row Gutter="24">
        <AntDesign.Col Span="18" Style="margin-bottom: 24px;">
            <Card>
                <Row>
                    <AntDesign.Col Span="6"></AntDesign.Col>
                    <AntDesign.Col Span="6"></AntDesign.Col>
                    <AntDesign.Col Span="6"></AntDesign.Col>
                    <AntDesign.Col Span="6"></AntDesign.Col>
                </Row>
                <div class="mapChart">
                    <Map />
                </div>
            </Card>
        </AntDesign.Col>
        <AntDesign.Col Span="6" Style="margin-bottom: 24px;">
            <Card Title="@("Activity forecast")">
                <ActiveChart />
            </Card>
            <Card Title="@("Efficiency")">
                <Gauge Title="Ratio" Height="180" Percent="81" />
            </Card>
        </AntDesign.Col>
    </Row>

    <Row Gutter="24">
        <AntDesign.Col Span="12" Style="margin-bottom: 24px;">
            <Card Title="@("Proportion Per Category")" Class="pieCard">
                <Row Style="padding: 16px 0;">
                    <AntDesign.Col Span="8">
                        <Pie LineWidth="2" />
                    </AntDesign.Col>
                    <AntDesign.Col Span="8">
                        <Pie LineWidth="2" />
                    </AntDesign.Col>
                    <AntDesign.Col Span="8">
                        <Pie LineWidth="2" />
                    </AntDesign.Col>
                </Row>
            </Card>
        </AntDesign.Col>
        <AntDesign.Col Span="6" Style="margin-bottom: 24px;">
            <Card Title="@("Popular Searches")">
                <TagCloud Data="Tags" Height="161" />
            </Card>
        </AntDesign.Col>
        <AntDesign.Col Span="6" Style="margin-bottom: 24px;">
            <Card Title="@("Resource Surplus")">
                <WaterWave Height="161" Title="Fund Surplus" Percent="34" />
            </Card>
        </AntDesign.Col>
    </Row>
</GridContent>

@inject IJSRuntime jsRuntime
@code
{
    public string[] Tags = new[] { "tset1" };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await jsRuntime.InvokeVoidAsync("antPro.monitorCharts");
    }
}